<template>
    <div class="fu" id="fu">

    </div>
</template>

<script>
export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chart = this.$echarts.init(document.getElementById('fu'));
            const options = {
                title: {
                    text: '服务类出口比例',
                    textStyle: {
                        color: 'rgb(85, 85, 85)',
                        fontSize: 14,
                        fontWeight: 100
                    }
                },
                color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
                tooltip: {

                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                },
                toolbox: {
                    show: true,
                },

                series: [
                    {
                        name: '服务类出口比例',
                        type: 'pie',
                        radius: [0, 35],

                        data: this.fu.data,
                        label: {
                            show: true,
                            color: 'inherit',
                            position: 'outside',
                            fontSize: 10,

                        },
                    },
                ],
            };


            chart.setOption(options);
            window.onresize = function () {
                chart.resize()
            }
        }
    },
    props: ['fu']
}
</script>
</script>

<style lang="less" scoped>
.fu {
    padding-top: 5px;
    margin-top: 15px;
    width: 100%;
    height: 47%;
    background-color: #fff;

}
</style>